
import React, { useCallback, useState } from "react";
import { Route, Link, useHistory } from 'react-router-dom'
import logo from "../../components/img/redlogo.jpg";
import seachImg from "../../components/img/206搜索.png";
import Rednav from "./css/Rednav.module.css";
import OldCss from "./css/search.module.css";//搜索框的css
import Css from "./css/index.module.css"

// 默认
import defaultHead from '../../components/img/head2.png'
import Personal from "../../components/personal";

function Total() {

    const svg1 = '<svg viewBox="0 0 1000 1000"  role="presentation" aria-hidden="true" focusable="false" style="height: 4em; width: 4em; display: block; fill: currentcolor;"><path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path></svg>'
    useCallback(
        () => {
            // 点击左上角的锚点进入首页
            function toHome() {
                history.push({ pathname: "/", state: {} });
            }
        }, [])
    // 判断是否登录了
    let isLogin = window.localStorage.getItem("isLogin")
    let history = useHistory();
    function toLogin() {
        history.push({ pathname: "/login", state: {} });
    }
    function toRegister() {
        history.push({ pathname: "/register", state: {} });
    }
    function toHome() {
        history.push({ pathname: "/", state: {} });
    }
    function toExperience() {
        history.push({ pathname: "/experience", state: {} });
    }
    const [isShowPersonalBox, setisShowPersonalBox] = useState(false)
    // 显示个人信息框
    function ShowPersonalBox() {
        setisShowPersonalBox(true);
        console.log(isShowPersonalBox, "isShowPersonalBox");
    }
    // 隐藏个人信息框
    function hiddenPersonalBox() {
        setisShowPersonalBox(false);

    }
    function inputEvent() {
        // 搜索框的点击事件：实现把搜索框变长，同时显示下方的信息展示框
    }
    return (
        <div>
            <div className={Rednav.NavBox}>
                <div className={Rednav.NavContent}>
                    {/* 左边logo */}
                    <div className={Rednav.leftBox}>
                        <div onClick={toHome} className={Css.logo} dangerouslySetInnerHTML={{ __html: svg1 as string }}></div>
                    </div>
                    {/* 中间content 搜索框*/}
                    <div className={Rednav.contentBox}>
                        <div className={OldCss.searchBox}>

                        </div>
                    </div>
                    {/* 右边logo */}
                    <div className={Rednav.rightBox}>
                        <div className={Rednav.rightContentBox}>
                            <ul className={Rednav.navUl}>
                                <li>
                                    <span></span>
                                    简体中文(CN)
                                </li>
                                <li>
                                    ￥CNY
                                </li>
                                <li>
                                    手机端
                                </li>
                                <li>出租房源</li>
                                <li onClick={toExperience}>开展体验</li>
                                <li>历史足迹</li>
                                <li>帮助</li>
                                <li className={isLogin ? Rednav.HeadImgs : Rednav.hiddenHead}>
                                    <div className={isLogin ? Rednav.HeadImg : Rednav.hiddenHead}>
                                        <img src={defaultHead} onClick={ShowPersonalBox} className={Rednav.Titleimg} alt="" />
                                        <div onMouseOut={hiddenPersonalBox} onMouseOver={ShowPersonalBox} className={isShowPersonalBox ? Rednav.ShowPersonalBox : Rednav.HiddenPersonalBox}>
                                            <Personal />
                                        </div>
                                    </div>
                                </li>
                                <li className={isLogin ? Rednav.hiddenRegister_Login : Rednav.dispalyRegister_Login} onClick={toRegister}>注册</li>
                                <li className={isLogin ? Rednav.hiddenRegister_Login : Rednav.dispalyRegister_Login} onClick={toLogin}>登录</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )
}



export default Total;
